<script setup lang="ts">
import { computed, ref, toRefs, unref } from "vue";

export interface pickerOptions extends Record<string, unknown> {
  label?: string;
  value?: string | number;
}
interface pickerProps {
  label?: string;
  value?: string | number;
}
interface Props {
  options: pickerOptions[];
  modelValue: any;
  props?: pickerProps;
}

const index = ref<number>();
const prop = withDefaults(defineProps<Props>(), {
  modelValue: "",
  options: () => [],
  props: () => {
    return {
      label: "label",
      value: "value",
    };
  },
});
const emits = defineEmits(["update:modelValue"]);
const { label, value } = prop.props;
const { options, modelValue } = toRefs(prop);
const activeData = computed(() => {
  if (!modelValue.value || !options.value) return;
  return options.value.find((v) => v[value!] == modelValue.value);
});

const bindPickerChange = function (e: any) {
  index.value = e.detail.value;
  const data = options.value[index.value][value!];
  emits("update:modelValue", data);
};
const handleBlur=function(){
  uni.hideKeyboard()
}
</script>

<template>
  <picker @change="bindPickerChange" :range-key="label" :value="index" :range="options">
    <view class="picker-text">

      <slot>
       <input
          readonly
          disabled
          :value="activeData && activeData[label!]"
          class="picker-input"
          @blur="handleBlur"
          placeholder="请选择"
        /> 
      </slot>
      <slot name="suffix">
        <span class="suffix">
          <image
            mode="scaleToFill"
            class="suffix-right"
            src=""
          />
        </span>
      </slot>
    </view>
  </picker>
</template>

<style lang="scss" scoped>
.picker-text {
  position: relative;
  font-size: 12px;
  display: flex;
  align-items: center;
  .picker-input {
    border: none;
    font-size: 13px;
    color: #666;
    padding: 0px 10px;
  }
  .suffix {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 15px;
    .suffix-right {
      width: 10px;
      height: 10px;
    }
  }
}
</style>
